<template>
	<view class="page">
		<view class="flex-col justify-start items-center relative p-header">
		  <view class="section"></view>
		  <text class="font_1 text_3 pos_3">{{statusTips}}</text>
		  <image
		    class="image_4 pos_2"
		    src="/static/apply-stateun.png"
		  />
		</view>
		<view class="p-title">
			<view class="title">企业基本信息</view>
		</view>
		<view class="inpt-unit">
			<view class="inpt-key">
				企业名称
			</view>	
			<view class="inpt-val">
				<input type="text" placeholder="请输入工商局注册全称" class="inpt" v-model="company_name" />
			</view>	
		</view>
		<view class="inpt-unit">
			<view class="inpt-key">
				统一社会信用代码
			</view>	
			<view class="inpt-val">
				<input type="text" placeholder="请输入统一社会信用代码" class="inpt" v-model="company_code" />
			</view>	
		</view>
		<view class="inpt-unit">
			<view class="inpt-key">
				营业执照注册日期
			</view>	
			<view class="inpt-val">
				<picker mode="date" @change="onRegDate">
					<view class="inpt" :class="regDate ? '' : 'placeholder' ">
						{{regDate ?  regDate : '请选择日期'}}
					</view>
				</picker>
			</view>	
		</view>
		<view class="inpt-unit">
			<view class="inpt-key">
				企业注册地址
			</view>	
			<view class="inpt-val">
				<input type="text" placeholder="请输入企业注册地址" class="inpt" v-model="company_address" />
			</view>
		</view>
		<view class="upload-unit">
			<view class="upload-key">
				营业执照上传
			</view>	
			<view class="imgs-wrap">
				<upload-images ref="companyImgRef" :count="1" :length="1"  />
			</view>
		</view>
		<view class="p-title">
			<view class="title">法人基本信息</view>
		</view>
		<view class="inpt-unit">
			<view class="inpt-key">
				法人姓名
			</view>	
			<view class="inpt-val">
				<input type="text" placeholder="请输入法人姓名" class="inpt" v-model="truename" />
			</view>	
		</view>
		<view class="inpt-unit">
			<view class="inpt-key">
				法人身份证号
			</view>	
			<view class="inpt-val">
				<input type="text" placeholder="请输入法人身份证号" class="inpt" v-model="idcard" />
			</view>	
		</view>
		<view class="upload-unit">
			<view class="upload-key">
				法人身份证照片上传
			</view>	
			<view class="imgs-wrap flex-row">
				<view class="img-wrap flex-col align-center">
					<upload-images :count="1" :length="1" ref="idcardZImgref"  />
					<span class="txt">正面</span>
				</view>
				<view class="img-wrap flex-col align-center">
					<upload-images :count="1" :length="1" ref="idcardFImgref"  />
					<span class="txt">反面</span>
				</view>
			</view>
		</view>
		<view class="p-title">
			<view class="title">账户信息</view>
		</view>
		<view class="inpt-unit">
			<view class="inpt-key">
				开户银行
			</view>	
			<view class="inpt-val">
				<input type="text" placeholder="请输入开户银行" class="inpt" v-model="bank_name" />
			</view>	
		</view>
		<view class="inpt-unit">
			<view class="inpt-key">
				所在银行
			</view>	
			<view class="inpt-val">
				<input type="text" placeholder="请输入所在银行" class="inpt" v-model="bank_branchname" />
			</view>	
		</view>
		<view class="inpt-unit">
			<view class="inpt-key">
				银行卡号
			</view>	
			<view class="inpt-val">
				<input type="number" placeholder="请输入银行卡号" class="inpt" v-model="bank_card" />
			</view>	
		</view>
		<view class="inpt-unit clear_mb">
			<view class="inpt-key">
				开户人姓名
			</view>	
			<view class="inpt-val">
				<input type="text" placeholder="请输入开户人姓名" class="inpt" v-model="bank_account" />
			</view>	
		</view>
		<view class="p-tips align-center" @click="tapAgree">
			<view class="align-center space-x-12">
			  <image
				class="image_9"
				:src="isAgree ? '/static/apply-checked.png' : '/static/apply-checkun.png' "
			  />
			  <view class="txt-wrap align-center">
					<text class="font_1 text_23">我已阅读并同意</text>
				    <text class="font_1 text_23 link" @click.stop="navTo('/pages/public/rich',{key:'companyregister'})">《注册协议》</text>
				    <text class="font_1 text_23 link" @click.stop="navTo('/pages/public/rich',{key:'companypp'})">《隐私政策》</text> 
			  </view>
			</view>			
		</view>

		<!-- //状态:-1=未申请,0=待审核,1=审核通过,2=审核不通过 -->
		<submit-btn @submit="submit" ref="submitRef" v-if="status===-1 || status===2">
			<template v-slot:btns="{isSubmitted}">
				<view class="p-btn" :class="{'disabled':isSubmitted}">
					立即登录
				</view>
			</template>
		</submit-btn>
		
		
		
	</view>
</template>

<script lang="ts">
import {
  reactive,
  toRefs,
  defineComponent, 
  ref,
  nextTick,
  // watchEffect,
} from 'vue';
import {onLoad} from "@dcloudio/uni-app";
import uploadImages from '@/components/upload-images.vue';
import { useStore} from '@/store'


const apply = defineComponent({
	components:{
		uploadImages,
	},
	props: {
	},
	setup(props: any, ctx: any) {
		const data = reactive({
			status: -1,  //状态:-1=未申请,0=待审核,1=审核通过,2=审核不通过
			statusTips:'',
			
			company_name:'',
			company_code:'',
			regDate:'', //时间展示
			company_registerdate:'',
			company_address:'',
			company_image:'',
			truename:'',
			idcard:'',
			
			// idcardZImg:'',
			// idcardFImg:'',
			idcard_images:'',
			bank_name:'',
			bank_branchname:'',
			bank_account:'',
			bank_card:'',
			
			isAgree:true,
	
		})
		onLoad(async ()=>{
			//此步晚于login  uni.$store.dispatch('user/getinfo')
			// const store:any = useStore();
			// const userInfo = store.state.user.user;
			let userInfo = await uni.$store.dispatch('user/getinfo')
			data.status = userInfo.status;
			// console.log("data.status ===",data.status,data.status === -1 );
			data.statusTips = handleStatusTips(userInfo.status);
			if(data.status !== -1){
				getApplyInfo();
			}
		})
		const handleStatusTips = (status)=>{
			//状态:-1=未申请,0=待审核,1=审核通过,2=审核不通过
			let tips = ''
			switch(+status){
				case -1:
				tips = '账号未申请，请完善资料';
				break;
				case 0:
				tips = '资料审核中，请耐心等待';
				break;
				case 1:
				tips = '审核通过';
				break;
				case 2:
				tips = '资料审核不通过，请补充资料';
				break;
			}
			return tips;
			
		}
		//获取之前提交资料
		const getApplyInfo=async()=>{
			let res = await uni.$request('user.getUserapplyinfo');
			const applyInfo = res.data || {};
			Object.keys(applyInfo).forEach(k=>{
				if(k=== 'company_registerdate'){
					data.regDate = uni.$tools.date('Y-m-d',applyInfo.company_registerdate);
				}
				if(k === 'company_image'){
					nextTick(()=>{
					   companyImgRef.value.setImgs([applyInfo.company_image]);
					})
				}
				if(k === 'idcard_images'){
					const idcardImgs = applyInfo.idcard_images.split(',');
					nextTick(()=>{
						idcardZImgref.value.setImgs([idcardImgs[0]]);
						idcardFImgref.value.setImgs([idcardImgs[1]]);
					})
				}
				data[k] = applyInfo[k];
			})
		}
		
		
		//监听注册日期
		const onRegDate = (e)=>{
			const regDate = e.detail.value;
			const iosDate = regDate.replace(/-/g, "/")
			data.company_registerdate = new Date(iosDate).getTime()/1000;
			data.regDate = regDate;
		}
		const tapAgree=()=>{
			data.isAgree = !data.isAgree;
		}
		
		
		// watchEffect(()=>{
		// })
		
		const submitRef = ref();
		const companyImgRef = ref();
		const idcardZImgref = ref();
		const idcardFImgref = ref();
		const submit= async ()=>{
			if(! data.isAgree){
				uni.$tools.msg('请同意协议')
			    return;
			}
			if(! uni.$tools.match( data.company_name,'nonull','请输入企业名称')){
			    return;
			}
			if(! uni.$tools.match( data.company_code,'nonull','请输入统一社会信用代码')){
			    return;
			}
			if(! uni.$tools.match( data.company_registerdate,'nonull','请选择营业执照注册日期')){
			    return;
			}
			if(! uni.$tools.match( data.company_address,'nonull','请输入企业注册地址')){
			    return;
			}
			
			const company_images = companyImgRef.value.getImgs()
			data.company_image = company_images.join(',');
			if(! uni.$tools.match( data.company_image,'nonull','请上传营业执照')){
			    return;
			}
			
			if(! uni.$tools.match( data.truename,'nonull','请输入法人姓名')){
			    return;
			}
			if(! uni.$tools.match( data.idcard,'nonull','请输入法人身份证号')){
			    return;
			}
			
			const idcardZImgs = idcardZImgref.value.getImgs()
			const idcardZImg = idcardZImgs.join(',');
			if(! uni.$tools.match( idcardZImg,'nonull','请上传法人身份证正面照片')){
			    return;
			}
			
			const idcardFImgs = idcardFImgref.value.getImgs()
			const idcardFImg = idcardFImgs.join(',');
			if(! uni.$tools.match( idcardFImg,'nonull','请上传法人身份证反面照片')){
			    return;
			}
			
			data.idcard_images = idcardZImg +','+ idcardFImg;
			
			if(! uni.$tools.match( data.bank_name,'nonull','请填写开户行')){
			    return;
			}
			if(! uni.$tools.match( data.bank_branchname,'nonull','请填写所在银行')){
			    return;
			}
			if(! uni.$tools.match( data.bank_card,'nonull','请输入银行卡号')){
			    return;
			}
			if(! uni.$tools.match( data.bank_account,'nonull','请输入开户人姓名')){
			    return;
			}
			
			const sendData={
				company_name:'',
				company_code:'',
				regDate:'', //时间展示
				company_registerdate:0,
				company_address:'',
				company_image:'',
				truename:'',
				idcard:'',
				idcard_images:'',
				bank_name:'',
				bank_branchname:'',
				bank_account:'',
				bank_card:'',
			}
			Object.keys(data).forEach(k=>{
				sendData[k] = data[k]
			})
			let res = await uni.$request('user.profile',sendData);
			submitRef.value.chgeStatus();
			uni.$tools.msg(res.msg);
			setTimeout(()=>{
				uni.$this.navTo('/pages/index/index',{},{type:"replaceAll"})
			},800)
		}
		return {
			...toRefs(data),
			onRegDate,
			tapAgree,
			companyImgRef,
			idcardZImgref,
			idcardFImgref,
			submitRef,
			submit,
			
		};
	}
})
export default apply;
</script>

<style lang="scss">
page{
	background-color: #fff;
}
.page{
	padding-top: 30rpx;
	padding-bottom: 57rpx;
}
.p-header{
	.section {
	  opacity: 0.2;
	  width: 532rpx;
	  height: 191rpx;
	  border: dashed 2rpx #000000;
	}
	.font_1 {
	  font-size: 24rpx;
	  font-family: PingFang;
	  color: #999999;
	}
	.pos_3 {
	  position: absolute;
	  left: 50%;
	  bottom: 37rpx;
	  transform: translateX(-50%);
	}
	.image_4 {
	  width: 54rpx;
	  height: 54rpx;
	}
	.pos_2 {
	  position: absolute;
	  left: 50%;
	  top: 38rpx;
	  transform: translateX(-50%);
	}
}
.p-title{
	margin-top: 10rpx;
	padding-left: 16rpx;
	margin-bottom: 10rpx;
	.title{
		height: 87rpx;
		line-height: 87rpx;
		padding-left: 15rpx;
		position: relative;
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		&:before{
			position: absolute;
			content: '';
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 4rpx;
			height: 28rpx;
			background: #256AE5;
		}
	}
}
.inpt-unit{
	margin-bottom: 40rpx;
	padding: 0 30rpx;
	.inpt-key{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.inpt-val{
		border-bottom: 2rpx solid #eee;
		.inpt{
			font-size: 24rpx;
			color:#333;
			height: 60rpx;
			line-height: 60rpx;
		}
	}

}
.upload-unit{
	padding: 0 30rpx;
	.inpt-key{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.imgs-wrap{
		margin-top: 20rpx;
		.img-wrap{
			margin-right: 24rpx;
			.txt{
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #E0E0E0;
			}
		}
		
	}
}
.p-tips{
	height: 83rpx;
	margin-bottom: 30rpx;
	padding: 0 30rpx;
	.space-x-12 {
	  & > view:not(:first-child),
	  & > text:not(:first-child),
	  & > image:not(:first-child) {
	    margin-left: 12rpx;
	  }
	  .image_9 {
	    width: 24rpx;
	    height: 24rpx;
	  }
	  .font_1 {
	    font-size: 24rpx;
	    font-family: PingFang;
	    color: #999999;
	  }
	  .text_23 {
	    color: #333333;
	  }
	}
	.link{
		height: 83rpx;
		line-height: 83rpx;
		padding-left: 8rpx;
	}
}
.p-btn{
	margin: 0 auto;
	width: 670rpx;
	height: 84rpx;
	background: #256ae5;
	border-radius: 10rpx;
	line-height: 84rpx;
	text-align: center;
	font-size: 34rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	&.disabled{
		background-color: #eee;
	}
}
.clear_mb{
	margin-bottom: 0;
}
</style>
